<template>
	<div class="container">
		<div style="background-color: #fff;">
			<HeaderTop>
				<div style="text-align: center;">大麦医师联盟</div>
			</HeaderTop>
		</div>
		<div class="header-box">
			<div class="header-left" @click='popupClick'>
				<div>{{branchObj.storeName}}</div>
				<div><u-icon name="arrow-right" color="#333" size="16"></u-icon></div>
			</div>
			<div class="header-right">{{branchObj.address}}</div>
		</div>
		<u-picker :show="show" :columns="allDoctor" keyName="storeName" @cancel='cancel' @confirm='confirm'></u-picker>
		<div style="padding:  10PX;">
			<div class="doctor-item" v-for='item in doctorArr' :key='item.deptId'>
				<div class="title-item">
					<div style="color: #4385F7;font-size: 20px;">{{item.deptName}}</div>
				</div>
				<div class="doctor-list">
					<div class="doctor-box" v-for='m in item.doctorList' :key='m.doctorId'
						@click='branchCourtListClick(m)'>
						<div class="img-box"><img :src="m.image" alt=""></div>
						<div class="text-box">
							<div style="font-size: 14px;">{{m.doctorName}}</div>
							<div style="font-size: 12px; color: #999;">{{m.deptName}}</div>
						</div>
					</div>

				</div>
			</div>
		</div>

	</div>
</template>


<script>
	import HeaderTop from "@/components/header-top/index.vue";
	import {
		nearestHospital,
		hospitalDepartmentList
	} from '@/api/axios/PhysicianManagement.js'
	import {
		storeList
	} from '@/api/axios/MakeAnAppointmentCenter.js'
	import {
		allStore
	} from '@/api/axios/center.js'
	export default {
		data() {
			return {
				branchObj: {},
				doctorArr: [],
				allDoctor: [],
				show: false
			};
		},
		components: {
			HeaderTop
		},
		methods: {
			branchCourtListClick(data) {
				console.log(data, 'data');
				uni.navigateTo({
					url: "/pages-makeAnAppointmentCenter/BranchCourtDetail/index?doctorId=" +
						data.doctorId + '&storeId=' + data.storeId,
				})
			},
			cancel() {
				this.show = false
			},
			confirm(data) {
				this.show = false;
				this.branchObj.storeName = data.value[0].storeName
				this.branchObj.address = data.value[0].address
				console.log(data);
				this.doctorArr = []
				hospitalDepartmentList({
					params: {
						storeId: data.value[0].storeId
					}
				}).then(res => {
					this.doctorArr = res
				})
			},
			popupClick() {
				this.show = true
			}
		},
		async created() {
			let mapData = uni.getStorageSync('mapData')

			this.branchObj = await nearestHospital({
				params: {
					localCoordinate: mapData,
					mode: 'driving'
				}
			})
			this.doctorArr = await hospitalDepartmentList({
				params: {
					storeId: this.branchObj.storeId
					// storeId: 688
				}
			})

			console.log(this.doctorArr);
			let allDoctor = await storeList({
				storeName: '',
				localCoordinate: mapData,
				mode: 'driving'
			})
			this.allDoctor.push(allDoctor)
		},
		mounted() {},

	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>